<template>
  <div class="overlay-page">
    <div class="visual-layout">
      <div class="grid-item grid-item-1 visual-layout-head flex align-center position-relative">
        <img class="title-img" src="../../../assets/title-img.png" alt="智慧能源信息平台">
        <visual-menu-button class="visual-menu-button"></visual-menu-button>
        <el-tooltip content="返回首页" effect="light">
          <el-button
            icon="el-icon-s-home" type="primary" circle
            style="margin-left: auto;z-index: 999;"
            @click="$router.push('/')"
          ></el-button>
        </el-tooltip>
      </div>
      <div class="grid-item grid-item-2">
        <v-chart ref="chart1" :option="chartOption1" style="width:100%;height:100%;"></v-chart>
      </div>
      <div class="grid-item grid-item-3">
        <map-center type="3"></map-center>
      </div>
      <div class="grid-item grid-item-4">
        <div class="sub-grid">
          <div class="grid-item">
            <div class="flex-center direction-column width-100 height-100">
              <div class="flex-center direction-column">
                <div class="focus-color font-10">重点用煤关注行业</div>
                <div class="text margin-top-10 font-1">
                  （{{prevMonth}}月用煤量第一行业）
                </div>
              </div>
              <div class="value font-6 margin-top">{{topWaterIndustry}}</div>
            </div>
          </div>
          <div class="grid-item">
            <div class="flex-center direction-column width-100 height-100">
              <div class="flex-center direction-column width-100 height-100">
                <div class="flex-shrink-0 flex-center direction-column">
                  <div class="focus-color font-10">标杆行业</div>
                  <div class="text margin-top-10 font-1">
                    （{{prevMonth}}月单位用煤产值第一行业）
                  </div>
                </div>
                <div class="value font-6 margin-top">有色金属矿采选业</div>
              </div>
            </div>
          </div>
          <div class="grid-item grid-x">
            <div class="flex-center direction-column width-100 height-100">
              <div class="flex-center width-100 height-100">
                <div class="flex-shrink-0 flex-center direction-column height-100">
                  <div class="focus-color font-10">标杆企业</div>
                  <div class="text margin-top-10 font-1">
                    （{{prevMonth}}月单位用煤产值第一企业）
                  </div>
                </div>
                <div class="value font-6 margin-left">泰丰轮胎(江西)有限公司</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-item grid-item-5">
        <div class="sub-grid">
          <div class="grid-item">
            <div class="flex-center direction-column width-100 height-100">
              <div class="flex-center direction-column">
                <div class="focus-color font-10">重点综合能耗关注行业</div>
                <div class="text margin-top-10 font-1">
                  （{{prevMonth}}月综合能耗第一行业）
                </div>
              </div>
              <div class="value font-6 margin-top">{{topConsumptionIndustry}}</div>
            </div>
          </div>
          <div class="grid-item">
            <div class="flex-center direction-column width-100 height-100">
              <div class="flex-center direction-column width-100 height-100">
                <div class="flex-shrink-0 flex-center direction-column">
                  <div class="focus-color font-10">标杆行业</div>
                  <div class="text margin-top-10 font-1">
                    （{{prevMonth}}月单位综合能耗产值第一行业）
                  </div>
                </div>
                <div class="value font-6 margin-top">有色金属矿采选业</div>
              </div>
            </div>
          </div>
          <div class="grid-item grid-x">
            <div class="flex-center direction-column width-100 height-100">
              <div class="flex-center width-100 height-100">
                <div class="flex-shrink-0 flex-center direction-column height-100">
                  <div class="focus-color font-10">标杆企业</div>
                  <div class="text margin-top-10 font-1">
                    （{{prevMonth}}月单位综合能耗产值第一企业）
                  </div>
                </div>
                <div class="value font-6 margin-left">泰丰轮胎(江西)有限公司</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-item grid-item-6">
        <div class="sub-grid">
          <div class="grid-item">
            <div class="flex-center direction-column width-100 height-100">
              <div class="flex-center direction-column">
                <div class="focus-color font-10">重点用电关注行业</div>
                <div class="text margin-top-10 font-1">
                  （{{prevMonth}}月用电量第一行业）
                </div>
              </div>
              <div class="value font-6 margin-top">{{topElectricIndustry}}</div>
            </div>
          </div>
          <div class="grid-item">
            <div class="flex-center direction-column width-100 height-100">
              <div class="flex-center direction-column width-100 height-100">
                <div class="flex-shrink-0 flex-center direction-column">
                  <div class="focus-color font-10">标杆行业</div>
                  <div class="text margin-top-10 font-1">
                    （{{prevMonth}}月单位用电产值第一行业）
                  </div>
                </div>
                <div class="value font-6 margin-top">有色金属矿采选业</div>
              </div>
            </div>
          </div>
          <div class="grid-item grid-x">
            <div class="flex-center direction-column width-100 height-100">
              <div class="flex-center width-100 height-100">
                <div class="flex-shrink-0 flex-center direction-column height-100">
                  <div class="focus-color font-10">标杆企业</div>
                  <div class="text margin-top-10 font-1">
                    （{{prevMonth}}月单位用电产值第一企业）
                  </div>
                </div>
                <div class="value font-6 margin-left">泰丰轮胎(江西)有限公司</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-item grid-item-7">
        <div class="sub-grid">
          <div class="grid-item">
            <div class="flex-center direction-column width-100 height-100">
              <div class="text">
                电产值占综合能耗产值
              </div>
              <div class="value font-10 margin-top">78%</div>
            </div>
          </div>
          <div class="grid-item">
            <div class="flex-center direction-column width-100 height-100">
              <div class="text">
                气产值占综合能耗产值
              </div>
              <div class="value font-10 margin-top">22%</div>
            </div>
          </div>
          <div class="grid-item grid-x">
            <v-chart ref="chart2" :option="chartOption2" style="width: 100%;height:100%;"></v-chart>
          </div>
        </div>
      </div>
      <div class="grid-item grid-item-8">
        <div class="factories width-100 height-100 overflow-hidden">
          <div class="factories-wrap" ref="wrap">
            <div class="factory" v-for="(item, index) in enterpriseLists" :key="index">
              <router-link
                :to="{name: 'EnterpriseAnalysis', query: {
                  enterpriseCode: item.id,
                }}"
                class="link"
              >
                <dl>
                  <dt>{{item.name}}</dt>
                  <dd>用煤量：{{item.water}} {{getUnitName('water')}}</dd>
                  <dd>用电量：{{item.electric}} {{getUnitName('electric')}}</dd>
                  <dd>用气量：{{item.gas}} {{getUnitName('gas')}}</dd>
                  <dd>综合能耗：{{item.consumption}} {{getUnitName('other')}}</dd>
                </dl>
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <div class="grid-item grid-item-9">
        <div class="sub-grid">
          <div class="grid-item">
            <div class="flex-center direction-column width-100 height-100">
              <div class="flex-center direction-column">
                <div class="focus-color font-10">重点用天然气关注行业</div>
                <div class="text margin-top-10 font-1">
                  （{{prevMonth}}月用天然气量第一行业）
                </div>
              </div>
              <div class="value font-6 margin-top">{{topGasIndustry}}</div>
            </div>
          </div>
          <div class="grid-item">
            <div class="flex-center direction-column width-100 height-100">
              <div class="flex-center direction-column width-100 height-100">
                <div class="flex-shrink-0 flex-center direction-column">
                  <div class="focus-color font-10">标杆行业</div>
                  <div class="text margin-top-10 font-1">
                    （{{prevMonth}}月单位用天然气产值第一行业）
                  </div>
                </div>
                <div class="value font-6 margin-top">有色金属矿采选业</div>
              </div>
            </div>
          </div>
          <div class="grid-item grid-x">
            <div class="flex-center direction-column width-100 height-100">
              <div class="flex-center width-100 height-100">
                <div class="flex-shrink-0 flex-center direction-column height-100">
                  <div class="focus-color font-10">标杆企业</div>
                  <div class="text margin-top-10 font-1">
                    （{{prevMonth}}月单位用天然气产值第一企业）
                  </div>
                </div>
                <div class="value font-6 margin-left">泰丰轮胎(江西)有限公司</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VisualXxx from '@/mixins/visual-xxx'
import { loadMonthIndustryRankingList } from '@/api/industryDataManagement'
import { defaultNumber } from '@/utils'

export default {
  name: 'visual-industry-data',
  mixins: [VisualXxx],
  data () {
    return {
      prevMonth: new Date().getMonth(),
      year: new Date().getFullYear(),
      prevYear: new Date().getFullYear() - 1,

      topWaterIndustry: '',
      topElectricIndustry: '',
      topGasIndustry: '',
      topConsumptionIndustry: '',
    }
  },
  computed: {
    beforePrevMonth () {
      const prevMonth = this.prevMonth
      return (prevMonth - 1) || 12
    },
    industryMapList () {
      return this.$store.state.industryMapList
    },
    chartOption1 () {
      const data = this.industryMapList.map(v => ({
        name: v._name,
        value: Number(v.enterpriseNumber) || 0
      }))
      return {
        tooltip: {
          trigger: 'item',
          position: 'right',
          valueFormatter: (value) => `${defaultNumber(value)}家`
        },
        legend: {
          show: true,
          orient: 'vertical',
          top: 'center',
          left: '50%',
          type: 'scroll',
          textStyle: {
            color: '#4b84e0',
            fontSize: 14,
          },
        },
        series: [
          {
            type: 'pie',
            label: {
              show: false,
            },
            center: ['25%', '50%'],
            radius: ['40%', '70%'],
            data: data
          }
        ],
      }
    },
    chartOption2 () {
      return {
        tooltip: {
          trigger: 'item',
          position: 'right',
          valueFormatter: (value) => `${defaultNumber(value)}%`
        },
        series: [
          {
            type: 'pie',
            label: {
              show: false,
            },
            radius: ['50%', '80%'],
            data: [
              {
                name: '气产值',
                value: 22
              },
              {
                name: '电产值',
                value: 78
              }
            ]
          }
        ],
      }
    },
    chartOption3 () {
      return {
        tooltip: {
          trigger: 'item',
          position: 'right',
          valueFormatter: (value) => `${defaultNumber(value)}%`
        },
        series: [
          {
            type: 'pie',
            label: {
              show: false,
            },
            radius: ['40%', '70%'],
            data: [
              {
                name: '气产值',
                value: 62
              },
              {
                name: '综合产值',
                value: 38
              }
            ]
          }
        ],
      }
    },
  },
  mounted () {
    this.$store.dispatch('GET_INDUSTRY_MAP_LIST')
    this.loadMonthIndustryRankingList()

    setTimeout(() => {
      try {
        this.showTips()
      } catch (e) {}
    }, 3000)
  },
  beforeDestroy () {
    this.timer1 && clearInterval(this.timer1)
    this.timer2 && clearInterval(this.timer2)
    this.timer3 && clearInterval(this.timer3)
  },
  methods: {
    showTips () {
      const chart1 = this.$refs.chart1
      const { energyIndustry } = this
      const length = energyIndustry.length
      let dataIndex = 0
      this.timer1 = setInterval(() => {
        dataIndex++
        if (dataIndex >= length) {
          dataIndex = 0
        }
        if (chart1) {
          chart1.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex,
          })
        } else {
          clearInterval(this.timer1)
        }
      }, 3000)

      let i = 0
      const r = 2
      const chart2 = this.$refs.chart2
      this.timer2 = setInterval(() => {
        i++
        if (i >= r) {
          i = 0
        }
        if (chart2) {
          chart2.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: i,
          })
        } else {
          clearInterval(this.timer2)
        }
      }, 3000)
    },
    loadMonthIndustryRankingList () {
      return loadMonthIndustryRankingList().then(res => {
        if (res.code === 200) {
          res.data = res.data || {}
          this.topWaterIndustry = res.data.water
          this.topElectricIndustry = res.data.electric
          this.topGasIndustry = res.data.gas
          this.topConsumptionIndustry = res.data.comprehensiveEnergyConsumption
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/variable.scss";

.visual-layout {
  grid-template-rows: 6.5vh 2fr 2fr 1fr 1fr;
  grid-template-columns: repeat(7, 1fr);
}
.grid-item-1 {
  grid-column-start: 1;
  grid-column-end: 8;
}
.grid-item-2 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}
.grid-item-3 {
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 4;
}
.grid-item-4 {
  grid-column-start: 6;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 3;
}
.grid-item-5 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
}
.grid-item-6 {
  grid-column-start: 6;
  grid-column-end: 8;
  grid-row-start: 3;
  grid-row-end: 4;
}
.grid-item-7 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 6;
}
.grid-item-8 {
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 4;
  grid-row-end: 6;
}
.grid-item-9 {
  grid-column-start: 6;
  grid-column-end: 8;
  grid-row-start: 4;
  grid-row-end: 6;
}
.sub-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-gap: 2px;
}
.grid-item-8,
.grid-item-4,
.grid-item-6,
.grid-item-9,
.grid-item-7,
.grid-item-5 {
  padding: 0;
  background: transparent;
}
.grid-item-4,
.grid-item-6,
.grid-item-9,
.grid-item-5 {
  .sub-grid {
    grid-template-columns: 5fr 4fr;
    grid-template-rows: 3fr 2fr;
  }
  .grid-x {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}
.grid-item-7 {
  .sub-grid {
    grid-template-rows: 9.3vh 1fr;
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-x {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}
.grid-item-2 {
  ul,li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .text {
    font-size: 14px;
  }
  .value {
    font-size: 1.2rem;
  }
}
</style>
